<template>
  <div class="test-form-controls">
    <h1>表单控件测试页面</h1>
    
    <el-form label-width="120px">
      <!-- Int控件测试 -->
      <div class="control-section">
        <h2>Int控件</h2>
        <IntControl 
          v-model="formData.intValue" 
          label="整数输入" 
          :min="0" 
          :max="100"
        />
        <div class="value-display">当前值: {{ formData.intValue }}</div>
      </div>

      <!-- Decimal控件测试 -->
      <div class="control-section">
        <h2>Decimal控件</h2>
        <DecimalControl 
          v-model="formData.decimalValue" 
          label="小数输入" 
          :precision="2"
        />
        <div class="value-display">当前值: {{ formData.decimalValue }}</div>
      </div>

      <!-- Datetime控件测试 -->
      <div class="control-section">
        <h2>Datetime控件</h2>
        <DatetimeControl 
          v-model="formData.datetimeValue" 
          label="日期时间选择"
          @update:modelValue="val => console.log('Datetime value changed:', val)"
        />
        <div class="value-display">当前值: {{ formData.datetimeValue || '未选择' }}</div>
      </div>

      <div class="control-section">
        <h2>Date控件</h2>
        <DateControl 
          v-model="formData.dateValue" 
          label="日期选择"
          @update:modelValue="val => console.log('Date value changed:', val)"
        />
        <div class="value-display">当前值: {{ formData.dateValue || '未选择' }}</div>
      </div>

      <!-- Bool控件测试 -->
      <div class="control-section">
        <h2>Bool控件</h2>
        <BoolControl 
          v-model="formData.boolValue" 
          label="是否启用"
          active-text="启用"
          inactive-text="禁用"
        />
        <div class="value-display">当前值: {{ formData.boolValue }}</div>
      </div>

      <!-- 单选控件测试 -->
      <div class="control-section">
        <h2>单选控件</h2>
        <SingleSelectControl 
          v-model="formData.singleSelectValue" 
          label="单选测试"
          :options="singleOptions"
        />
        <div class="value-display">当前值: {{ formData.singleSelectValue }}</div>
      </div>

      <!-- 多选控件测试 -->
      <div class="control-section">
        <h2>多选控件</h2>
        <MultiSelectControl 
          v-model="formData.multiSelectValue" 
          label="多选测试"
          :options="multiOptions"
        />
        <div class="value-display">当前值: {{ formData.multiSelectValue }}</div>
      </div>

      <!-- 弹窗选择控件测试 -->
      <div class="control-section">
        <h2>弹窗选择控件</h2>
        <DialogSelectControl 
          v-model="formData.dialogSelectValue" 
          label="弹窗选择"
          dialog-title="选择项目"
          @confirm="handleDialogConfirm"
          :formatter="formatDialogValue"
        >
          <template #dialog-content>
            <el-table 
              :data="dialogOptions" 
              highlight-current-row
              @row-click="handleRowClick"
            >
              <el-table-column prop="label" label="名称" />
              <el-table-column prop="value" label="值" />
            </el-table>
          </template>
        </DialogSelectControl>
        <div class="value-display">当前值: {{ formatDialogValue(formData.dialogSelectValue) || '未选择' }}</div>
      </div>

      <!-- 枚举选择控件测试 -->
      <div class="control-section">
        <h2>枚举选择控件</h2>
        <EnumControl 
          v-model="formData.enumValue" 
          label="枚举选择"
          :options="enumOptions"
        />
        <div class="value-display">当前值: {{ formatEnumValue(formData.enumValue) || '未选择' }}</div>
      </div>

      <div class="form-actions">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import IntControl from '@/components/form-controls/IntControl.vue'
import DecimalControl from '@/components/form-controls/DecimalControl.vue'
import DatetimeControl from '@/components/form-controls/DatetimeControl.vue'
import DateControl from '@/components/form-controls/DateControl.vue'
import DialogSelectControl from '@/components/form-controls/DialogSelectControl.vue'
import EnumControl from '@/components/form-controls/EnumControl.vue'
import BoolControl from '@/components/form-controls/BoolControl.vue'
import SingleSelectControl from '@/components/form-controls/SingleSelectControl.vue'
import MultiSelectControl from '@/components/form-controls/MultiSelectControl.vue'

interface Option {
  label: string
  value: string | number
  disabled?: boolean
}

export default defineComponent({
  name: 'TestFormControls',
  components: {
    IntControl,
    DecimalControl,
    DatetimeControl,
    DateControl,
    DialogSelectControl,
    EnumControl,
    BoolControl,
    SingleSelectControl,
    MultiSelectControl
  },
  setup() {
    // 表单数据
    const formData = reactive({
      intValue: 0,
      decimalValue: 0.0,
      datetimeValue: '',
      dateValue: '',
      boolValue: false,
      singleSelectValue: '',
      multiSelectValue: [],
      dialogSelectValue: '',
      enumValue: ''
    })

    // 选项数据
    const singleOptions: Option[] = [
      { label: '选项1', value: 'option1' },
      { label: '选项2', value: 'option2' },
      { label: '选项3', value: 'option3', disabled: true }
    ]

    const multiOptions: Option[] = [
      { label: '多选1', value: 'multi1' },
      { label: '多选2', value: 'multi2' },
      { label: '多选3', value: 'multi3' }
    ]

    const dialogOptions: Option[] = [
      { label: '项目1', value: 'item1' },
      { label: '项目2', value: 'item2' },
      { label: '项目3', value: 'item3' }
    ]

    const enumOptions: Option[] = [
      { label: '枚举1', value: 'enum1' },
      { label: '枚举2', value: 'enum2' },
      { label: '枚举3', value: 'enum3' }
    ]

    // 处理行点击事件
    const formatDialogValue = (value: string) => {
      if (!value) return ''
      const item = dialogOptions.find(item => item.value === value)
      return item ? `${item.label} (${item.value})` : value
    }

    const handleRowClick = (row: Option) => {
      formData.dialogSelectValue = row.value
    }

    const handleDialogConfirm = (value: any) => {
      console.log('Dialog confirmed with value:', value)
    }

    // 提交表单
    const handleSubmit = () => {
      console.log('表单提交:', formData)
      ElMessage.success('表单提交成功!')
    }

    // 重置表单
    const formatEnumValue = (value: string) => {
      if (!value) return ''
      const item = enumOptions.find(item => item.value === value)
      return item ? item.label : value
    }

    const handleReset = () => {
      Object.assign(formData, {
        intValue: 0,
        decimalValue: 0.0,
        datetimeValue: '',
        dateValue: '',
        boolValue: false,
        singleSelectValue: '',
        multiSelectValue: [],
        dialogSelectValue: '',
        enumValue: ''
      })
      ElMessage.info('表单已重置')
    }

    return {
      formData,
      singleOptions,
      multiOptions,
      dialogOptions,
      enumOptions,
      formatDialogValue,
      handleRowClick,
      handleDialogConfirm,
      handleSubmit,
      handleReset,
      formatEnumValue
    }
  }
})
</script>

<style scoped>
.test-form-controls {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.control-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.value-display {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}
</style>